<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>网上书店登陆页面</title>
		<link rel="stylesheet"  href="css/style.css">
		<link rel="stylesheet" href="css/layui/css/layui.css" media="all">
		<script src="js/app.js" charset="UTF-8"></script>
		<script src="js/vue.js"></script>
		<script src="js/axios.min.js"></script>
		<script src="js/vue-cookies.js"></script>
		<script src="css/layui/layui.js" charset="utf-8"></script>
	</head>
	<body>
		<div id="particles-js" ></div>
		<div id="app" class='loginregister'>
			
			<div class="cent-box-header">
				<div class="logo">
					<img src="img/logo.png" alt="Flowers" width="300" height="162">
				</div>
			</div>
			
			<div>
				<label class="layui-form-label">用户名:</label>
				<div class="layui-input-block">
					<input v-model="username" placeholder="请输入用户名" class="layui-input">
				</div>
			</div>
			
			
			<div>
			<label class="layui-form-label">密码:</label>
			<div class="layui-input-block">
				<input v-model="password"  type="password" placeholder="请输入密码" class="layui-input">
			</div>
			</div>
			<div style="margin-top: 5px;margin-left: 60px;" >
				<button @click="login" class="layui-btn layui-btn-fluid" style="float: left;">登陆</button>
				</div>
			<div style="margin-top:50px;margin-left: 60px;" >
				<button @click="jumptoregister" class="layui-btn layui-btn-fluid" id="button"  >注册</button>
			</div>
		

		</div>
		<script src="js/particles/particles.js"></script>
		<script src="js/particles/app.js"></script>

		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				data: {
					username: null,
					password: null
				},
				created:function(){
				if($cookies.get("userName")!=null&&$cookies.get("passWord"))
				console.log("登陆过")
				else
				console.log("没有登陆过")
				},
				methods: {
					jumptoregister:function(){
						window.location.href='register.html';
					},
					login: function() {
						var postdata = JSON.stringify({
							userName: this.username,
							passWord: this.password,
						});

						console.log(URL + '/user/checklogin')
						console.log(postdata)
						axios.post(URL + '/user/checklogin', postdata, {
								headers: {
									'Content-Type': 'application/json;charset=UTF-8'
								}
							})
							.then(function(response) {
								if (response.data.code == 1) {
									console.log(response)
									console.log(response.data.result.userName)
									layui.use('layer', function(){
										layer.msg("登陆成功，转向主页")
									});
									window.location.href='index.html';//跳转主页
								
							$cookies.set("userName",response.data.result.userName,"0")
							$cookies.set("passWord",response.data.result.passWord,"0")
							$cookies.set("loginflag", true, "0")
								} else if (response.data.code == 0) {
									console.log(response)
									console.log(response.data.msg)
									layui.use('layer', function(){
										layer.msg("登陆失败，密码错误")
									});
								}
							})
							.catch(function(error) {
								console.log(error);
							});

					}
				}

			})
		</script>
		<div class="footer">
			<p>网上书店</p>
			<p>Designed By zjy & <a href="https://gitee.com/hwmc/online_bookstore">https://gitee.com/hwmc/online_bookstore</a>
				2020</p>
		</div>
	</body>
</html>
